<template>
    <BaseTable :columns="columns" :data="tableList">
        <template #checkContent="{ scope: { row } }">
            <el-select v-model="row.checkContent" size="mini" placeholder="请选择" style="width: 100%">
                <el-option v-for="m in roadbedCheckContentOptions" :key="m.id" :label="m.name" :value="m.name" />
            </el-select>
        </template>
        <!-- <template #location="{ scope: { row } }">
            <el-input v-model.trim="row.location" maxlength="20" clearable placeholder="请输入" />
        </template> -->
        <template #type="{ scope: { row } }">
            <el-select v-model="row.type" size="mini" placeholder="请选择" style="width: 100%" clearable>
                <el-option v-for="m in DefectDiseaseTypeOptions" :key="m.value" :label="m.label" :value="m.label" />
            </el-select>
        </template>
        <template #header="{ scope: { column } }">
            <i class="el-icon-info" title="“异常描述”未填写、填写“正常”时，对应记录不生成“缺陷病害”"></i>
            <span>{{ column.label }}</span>
            <BaseButton style="margin-left: 8px;" plain size="mini" @click="handleClick">{{ buttonName }}</BaseButton>
        </template>
        <template #description="{ scope: { row } }">
            <el-input v-model.trim="row.description" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #advice="{ scope: { row } }">
            <el-input v-model.trim="row.advice" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #remark="{ scope: { row } }">
            <el-input v-model.trim="row.remark" type="textarea" autosize maxlength="200" show-word-limit clearable placeholder="请输入" />
        </template>
        <template #handle="{ scope: { $index } }">
            <BaseButton v-if="$index === tableList.length - 1" type="text" @click="handleAdd">添加行</BaseButton>
            <BaseButton type="text" :disabled="tableList.length === 1" color="danger" @click="handleDelete($index)">删除</BaseButton>
        </template>
    </BaseTable>
</template>

<script>
// import { mapState } from 'vuex'
import reconfirm from '@/utils/reconfirm'
import { DefectDiseaseTypeOptions } from '@/views/maintenance-decision/constants'
import { DictionaryModel } from '@/models'
const model = new DictionaryModel()

export default {
    name: 'FlawTable',
    data() {
        return {
            DefectDiseaseTypeOptions,
            buttonName: '全部正常',
            tableList: [],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '64',
                        type: 'index'
                    }
                },
                {
                    slot: 'checkContent',
                    attrs: {
                        prop: 'checkContent',
                        label: '检查内容',
                        width: '190'
                    }
                },
                // {
                //     slot: 'location',
                //     attrs: {
                //         prop: 'location',
                //         label: '位置/桩号',
                //         width: '170'
                //     }
                // },
                {
                    slot: 'type',
                    attrs: {
                        prop: 'type',
                        label: '上报类型',
                        width: '140'
                    }
                },
                {
                    slot: 'description',
                    headerSlot: 'header',
                    attrs: {
                        prop: 'description',
                        label: '异常描述（性质、范围、程度）',
                        'min-width': '344'
                    }
                },
                {
                    slot: 'advice',
                    attrs: {
                        prop: 'advice',
                        label: '养护措施意见',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'remark',
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '170'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '140'
                    }
                }
            ])
        }
    },
    computed: {
        // roadbedCheckContentOptions() {
        // // 获取store存储的roadbedCheckContentOptions
        //     return this.$store.getters.types.roadbedCheckContentOptions
        // },
        // tableList() {
        // // 根据roadbedCheckContentOptions初始化tableList
        //     const options = this.roadbedCheckContentOptions
        //     if (options.length > 0) {
        //         return options.map(item => ({
        //             checkContent: item.name,
        //             description: '',
        //             disposalResults: '',
        //             remark: ''
        //         }))
        //     }
        //     return [] // 如果options为空，则返回空数组
        // }
    },
    async created() {        
        model.getTypes('roadbedCheckContent').then(data => {
            this.roadbedCheckContentOptions = data || []
            console.log(data)
            this.tableList = (data || []).map(item => (
                {
                    checkContent: item.name,
                    locationType: '',
                    location: '',
                    type: '',
                    description: '',
                    unit: '',
                    num: '',
                    disposalResults: '',
                    deviceList: [],
                    remark: ''
                }
            ))
        })
    },
    methods: {
        handleClick() {
            this.buttonName = this.buttonName === '全部正常' ? '取消' : '全部正常'
            if (this.buttonName === '取消') {
                this.tableList.forEach(item => {
                    item.description = '正常'
                })
            } else {
                this.tableList.forEach(item => {
                    item.description = ''
                })
            }
        },
        handleAdd() {
            this.tableList.push({
                checkContent: '',
                locationType: '',
                location: '',
                type: '',
                description: '',
                unit: '',
                num: '',
                disposalResults: '',
                deviceList: [],
                remark: ''
            })
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.tableList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
